<template>
    <div>
        <Form
                ref="formValidate"
                :model="formValidate"
                :rules="ruleValidate"
                :label-width="120"
                class="order-create"
        >
            <FormItem label="故障设备编号" prop="deviceId">
                <Input v-model="formValidate.deviceId" placeholder="故障设备编号" style="width: 200px"></Input>
            </FormItem>
            <FormItem label="故障设备名称" prop="name">
                <Input v-model="formValidate.name" placeholder="故障设备名称" style="width: 200px"></Input>
            </FormItem>
            <FormItem label="故障设备分类" prop="type">
                <Input v-model="formValidate.type" placeholder="故障设备分类" style="width: 200px"></Input>
            </FormItem>
            <FormItem label="生产时间" prop="productionTime">
                <DatePicker :options="ruleValidate.beforeToday" v-model="formValidate.productionTime" type="date"
                            placeholder="生产时间" style="width: 200px"></DatePicker>
            </FormItem>
            <FormItem label="故障时间" prop="breakdownTime">
                <DatePicker :options="ruleValidate.beforeToday" v-model="formValidate.breakdownTime" type="date"
                            placeholder="故障时间" style="width: 200px"></DatePicker>
            </FormItem>

            <FormItem label="故障描述" prop="detail">
                <Input style="width: 350px" v-model="formValidate.detail" type="textarea" placeholder="detail" :rows="5"
                       :autosize="{minRows: 5,maxRows:7}"></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
            </FormItem>

        </Form>
    </div>
</template>

<script>
    import {createRepairOrder} from "@/api"

    export default {
        name: "order-create",

        data() {
            const afterProduct = (rule, value, callback) => {
                let prTime = this.formValidate.productionTime
                if (prTime && (value.valueOf() < prTime.valueOf())) {
                    callback(new Error("故障时间必须在生产日期之后"))
                } else {
                    callback()
                }
            }
            return {
                formValidate: {
                    deviceId: null,
                    name: null,
                    type: null,
                    detail: null,
                    breakdownTime: null,
                    productionTime: null
                },
                ruleValidate: {
                    beforeToday: {
                        disabledDate(date) {
                            return date && date.valueOf() > Date.now()
                        }
                    },
                    deviceId: [{required: true, message: '请输入故障设备编号', trigger: 'blur'},
                    ],
                    name: [{required: true, message: '请输入故障设备名称', trigger: 'blur'}],
                    type: [{required: true, message: '请输入故障设备分类', trigger: 'blur'}],
                    detail: [{required: true, message: '请输入故障描述', trigger: 'blur'}],
                    breakdownTime: [{required: true, type: 'date', message: '故障时间不能为空', trigger: 'change'},
                        {validator: afterProduct, trigger: 'change'}],
                    productionTime: [{required: true, type: 'date', message: '生产时间不能为空', trigger: 'change'},
                        {
                            validator: (rule, value, callback) => {
                                this.$refs.formValidate.validateField("breakdownTime");
                                callback()
                            }, trigger: 'change'
                        }],
                }
            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        createRepairOrder(this.formValidate).then((res) => {
                            if (res && res.meta && res.meta.isSuccess) {
                                this.$Message.success('创建成功!');
                                this.$emit("submit-ok")
                            } else if (res && res.meta) {
                                this.$Message.error(`提交失败!${res.meta.msg}`);
                                this.$emit("submit-error")
                            }
                        })
                    } else {
                        this.$Message.error('提交失败!');
                        this.$emit("submit-error")
                    }
                })
            },
            handleReset(name) {
                this.$refs[name].resetFields();
            },

        },

    }
</script>

<style scoped lang="scss">
    .order-create {

    }
</style>
